<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>练习 - 网页时钟</title>
  <style>
    .clock {
      width: 180px;
      height: 180px;
      border: 4px solid #000;

      margin: 100px auto 0;

      border-radius: 50%;

      position: relative;
    }

    .clock .line {
      width: 2px;
      height: 100%;
      background-color: #ccc;
      transform: translate(-50%);
      position: absolute;
      left: 50%;
    }

    .clock .line:nth-child(2) {
      transform: translate(-50%) rotate(30deg);
    }

    .clock .line:nth-child(3) {
      transform: rotate(60deg);
    }

    .clock .line:nth-child(4) {
      transform: rotate(90deg);
    }

    .clock .line:nth-child(5) {
      transform: rotate(120deg);
    }

    .clock .line:nth-child(6) {
      transform: rotate(150deg);
    }

    .clock .line:nth-child(4),
    .clock .line:first-child {
      width: 3px;
    }

    .clock .cover {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background-color: #fff;
      transform: translate(-50%, -50%);

      position: absolute;
      left: 50%;
      top: 50%;
    }

    .dotted {
      width: 12px;
      height: 12px;
      background-color: #000;
      border-radius: 50%;
      transform: translate(-50%, -50%);

      position: absolute;
      left: 50%;
      top: 50%;
    }

    .hour {
      width: 6px;
      height: 40px;
      background-color: #000;
      transform: translate(-50%);

      transform-origin: center bottom;

      position: absolute;
      left: 50%;
      bottom: 50%;

      animation: rotate 43200s linear infinite;
    }

    .minutes {
      width: 4px;
      height: 50px;
      background-color: #000;
      transform: translate(-50%) rotate(30deg);
      transform-origin: center bottom;

      position: absolute;
      left: 50%;
      bottom: 50%;

      animation: rotate 3600s linear infinite;
    }

    .seconds {
      width: 2px;
      height: 60px;
      background-color: red;
      transform: translate(-50%) rotate(120deg);
      transform-origin: center bottom;

      position: absolute;
      left: 50%;
      bottom: 50%;

      animation: rotate 60s steps(60) infinite;
    }

    @keyframes rotate {
      /* from {
        transform: translate(-50%) rotate(0deg);
      } */

      to {
        transform: translate(-50%) rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="clock">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>

    <!-- 遮盖层 -->
    <div class="cover"></div>
    <!-- 时分秒针 -->
    <div class="hour"></div>
    <div class="minutes"></div>
    <div class="seconds"></div>
    <!-- 圆点 -->
    <div class="dotted"></div>
  </div>
</body>
</html>